import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs } from 'antd';
import { Dispatch, AnyAction } from 'redux';
import { Statistics } from '@/models/connect';
import _ from 'lodash';
import styles from './info.css';
import {
  VitalSignsStatistics,
  ByenergyConsumptionStatistics,
  DrugMedicalStatistics,
  EnvironmentStatistics,
  GoodsStatistics,
  PositionInfoStatistics,
} from './infoComponents';
import SportsRecoveryStatistics from './infoComponents/sportsRecoveryStatistics';
import { isMenuVisible } from '@/utils/utils';

interface InfoProps {
  statistics?: Statistics;
  deviceType?: Statistics;
  loading: boolean;
}

const { TabPane } = Tabs;
interface P {}
@connect()
class Info extends Component<InfoProps>  {
  constructor(props: P) {
    super(props);
    this.state = {
      list: [
        { name: '生命体征', id: 0 },
        { name: '运动康复', id: 1 },
        { name: '物品信息', id: 2 },
        { name: '戒毒医疗', id: 3 },
        { name: '环境信息', id: 4 },
        { name: '能耗监测', id: 5 },
        { name: '位置信息', id: 6 },
      ],
      visible: '18',
    };
  }
  componentWillMount(){
    let num:any = localStorage.getItem('isTrue');
    if(localStorage.getItem('isTrue')){
      this.setState({
          visible: num
      });
    }
    const { dispatch } = this.props;
    dispatch({ type: 'statistics/deviceType' });
  }
  render() {
    const { deviceType = [] } = this.props;
    console.log(this.state.visible);
    return (
      <div className={styles['inforStatic-container']}>
        <div className={styles['inforStatic-left']}>
          <div className={styles['inforStatic-left-bg']} />
          <div className={styles['inforStatic-left-textBox']}>
            {_.map(deviceType, item => (
              <div
                className={`${styles['content']} ${
                  item.deviceTypeNo === this.state.visible ? styles['content-active'] : null
                }`}
                key={item.deviceTypeNo}
                onClick={() => {
                  this.setState({ visible: item.deviceTypeNo });
                }}
              >
                {item.deviceTypeName}
              </div>
            ))}
          </div>
        </div>
        <div className={styles['inforStatic-container-right']}>
          {(() => {
            switch (this.state.visible) {
              case '16':
                return isMenuVisible('iot:vitalSignsLog:view') && <VitalSignsStatistics deviceTypeNo={this.state.visible}/>;
              case '17':
                return isMenuVisible('iot:sportsRecoveryLog:view') && <SportsRecoveryStatistics deviceTypeNo={this.state.visible} />;
              case '15':
                return isMenuVisible('iot:positionInfoLog:view') && <PositionInfoStatistics deviceTypeNo={this.state.visible} />;
              case '18':
                return isMenuVisible('iot:goodsInfoLog:view') && <GoodsStatistics deviceTypeNo={this.state.visible} />;
              case '13':
                return isMenuVisible('iot:drugMedicalLog:view') && <DrugMedicalStatistics deviceTypeNo={this.state.visible} />;
              case '21':
                return isMenuVisible('iot:environmentInfoLog:view') && <EnvironmentStatistics deviceTypeNo={this.state.visible} />;
              case '19':
                return isMenuVisible('iot:energyConsumptionLog:view') && <ByenergyConsumptionStatistics deviceTypeNo={this.state.visible} />;
            }
          })()}
        </div>
      </div>
    );
  }
}
export default connect(({loading,statistics}:any)=>({
  loading: loading.effects['statistics/deviceType'],
  deviceType: statistics.deviceType,
}))(Info);
